<template>
  <!-- 购物车页面 -->
  <div class='shopping-cart-wrap wrapbg'>
    <!-- 商品列表 -->
    <div class='card-wrap'>
      <!-- 循环渲染过滤好的数据 -->
      <div v-for='(item, index) in evenGoodsList' :key='item+index'>
        <van-card
          :title="item.title"
          :desc="'款式颜色：' + item.spec"
          :price="item.price"
          :tag="item.tag"
          :lazy-load="true"
          title-class='sales-title'
          desc-class='sales-desc'
          num-class='sales-num'
          price-class='sales-price'
          custom-class='sales-wrap'
          @click='toPage(item.link)'
        >
          <!-- 自定义左侧图片 -->
          <view slot='thumb'>
            <img :src="item.thumb" class='sales-thumb'/>
          </view>
          <!-- 购买图标 -->
          <view slot='footer'>
            <p class="buy-num-wrap">
              <!-- 用户购物商品的数量 加减 -->
              <span class="buy-btn" @click.stop="decrement(item)">-</span>
              <span class="num" @click.stop>{{ item.num }}</span>
              <span class="buy-btn" @click.stop="increment(item)">+</span>
            </p>
          </view>
        </van-card>

      </div>
    </div>

    <!-- 空东西的时候显示 -->
    <div class="no-item" v-show="evenGoodsList.length>0 ? false : true">
      购物车空空如也呢~~
    </div>

    <!-- 底部结算栏 -->
    <div class='footer' v-show="evenGoodsList.length>0 ? true : false">
      <div class='total'>
        合计：<span>{{MoneySymbol}}{{totalAmount}}</span>
      </div>
      <button class='settlement'
      @click.stop="goPay"
      >
        立即结算
      </button>
    </div>

  </div>
</template>

<script>
import {
  bindViewTap
  // fetch, hideLoading
  // showToast, showLoading
} from '@/utils/index' // 引入公用库
// import { getIndexList, getUrl } from '@/utils/api' // 请求封装公用库
import store from '@/utils/store' // 全局状态管理
import TYPES from '@/constant/index' // 常量文件

// 引入组件
// import cardGroup from '@/components/cardGroup'

export default {
  data () {
    return {
      checkedAll: false, // 全选判断
      MoneySymbol: TYPES.goodsData.MoneySymbol // 存金额前缀符号
    }
  },
  // 计算属性
  computed: {
    // 购物车商品数据
    evenGoodsList () {
      return store.state.goodsData
    },
    // 总金额计算
    totalAmount () {
      let data = store.state.goodsData
      let numAll = 0 // 总数
      for (let i = 0; i < data.length; i++) {
        // 累加金额，数量*金额
        numAll += (data[i]['num'] * data[i]['price'])
      }
      return numAll
    }
  },
  // 引入组件可当标签使用
  components: {
  },
  // 定义自定义函数
  methods: {
    // 增加数量
    increment (e) {
      // 把当前商品信息数据传入
      store.dispatch('increment', e)
    },
    // 减少数据
    decrement (e) {
      store.dispatch('decrement', e)
    },
    // 买单结算
    goPay () {
      // showToast({
      //   title: '结算成功'
      // })
      bindViewTap(`../buyPage/main?arrFlag=goodsData`, true)
    },
    // TODO: 跳到商品详情页面
    toPage (id) {
      console.log('商品页', id)
      bindViewTap(`../productPage/main?id=${id}`, true)
    }
  },
  // 在实例创建完成后被立即调用
  mounted () {

  }
}
</script>

<style scope>
page {
  background-color: rgb(248, 248, 248);
}
/* 空数据显示 */
.no-item {
  margin-top: 50%;
  text-align: center;
  font-size: 32rpx;
  color: #969696;
}
/* 最外控制层 */
.shopping-cart-wrap {
  padding-bottom: 35px;
  box-sizing: border-box;
}
/* 购物车列表 */
.card-wrap {
  display: block;
}
/* 列表标题 */
.card-title {
  /* margin-bottom: 10px; */
  height: 46rpx;
  line-height: 46rpx;
  font-size: 28rpx;
  font-weight: bold;
  padding: 10rpx 0 10rpx 20rpx;
  background: #fff;
  border-bottom: 1px solid rgba(190,190,190,.7);
}
/* 每个商品间隔调整 */
/* .sales-wrap {} */
.sales-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin: 10rpx 0 16rpx 0;
  font-size: 26rpx;
}
/* 商品详细描述 */
.sales-desc{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 24rpx;
  height: 36rpx;
  line-height: 36rpx !important;
}
/* 商品价格 */
.sales-price {
  position: absolute;
  font-size: 32rpx;
  bottom: 20rpx;
  color: #C5223D !important;
}

/* 立即购买按钮 */
.sales-shopping-box2{
  position: absolute;
  height: 56rpx;
  right: 36rpx;
  bottom: 22rpx;
  font-size: 22rpx;
  border-radius: 26rpx;
  /* background-image: linear-gradient(145deg, rgb(238, 59, 59) 55%, #FF9823); */
  background-image: linear-gradient(110deg, #CA9D52 0,
    #EEE697, #E8BB58 , #EEE697 , #CA9D52 100%);
}
/* 左侧图片调整空间大小 */
.van-card__thumb {
  width: 320rpx !important;
  height: 240rpx !important;
}
.sales-thumb {
  overflow: hidden;
  width: 320rpx;
  height: 240rpx;
  border-radius: 6px;
  box-shadow: 1px 0 3px #969696;
}
/* 商品数量选择 */
.buy-num-wrap {
  position: absolute;
  display: flex;
  right: 36rpx;
  bottom: 22rpx;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
}
/* 加减按钮 */
.buy-num-wrap .buy-btn {
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  /* border: 1px solid rgba(190,190,190,.7); */
  border-radius: 50%;
  background: #E9CF85;
}
/* 当前商品数量 */
.buy-num-wrap .num {
  width: 58rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin: 0 10rpx;
  padding: 0 10rpx;
  /* border-top: 1px solid rgba(190,190,190,.7);
  border-bottom: 1px solid rgba(190,190,190,.7); */
  border-radius: 28rpx;
  background: #E9CF85;
}
/* 底部结算栏 */
.footer {
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  display:-webkit-flex;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 96rpx;
  font-size: 32rpx;
  background-color:#000;
}
.footer .total {
  flex: 1;
  padding-right: 230rpx;
  text-align:right;
  box-sizing: border-box;
  font-size: 26rpx;
}
.footer .total span{
  font-size: 36rpx;
  /* font-weight: bold; */
  color: #C5223D;
}
/* 立即结算按钮 */
.footer .settlement {
  position: absolute;
  height: 68rpx;
  line-height: 68rpx;
  right: 36rpx;
  bottom: 16rpx;
  font-size: 22rpx;
  border-radius: 26rpx;
  padding: 0 36rpx;
  /* 背景颜色渐变（可放多个渐变） 参数1方向（可写角度50deg）2颜色（占的比例-可选） 3颜色..可多个颜色 */
  /* background-image: linear-gradient(to right, #FF7601, #FE5600); */
  background-image: linear-gradient(110deg, #CA9D52 0,
    #EEE697, #E8BB58 , #EEE697 , #CA9D52 100%);
  color: #000;
}
</style>
